<template>
  <div class="main_box">
    <CommonHeader title="指标排名"></CommonHeader>
    <div class="nav_box">
      <div class="nav_content">
        <div class="nav_item" :class="item.value === queryInfo.state ? 'active' : ''" v-for="item in selectList" :key="item.value" @click="changeNav(item)">
          {{ item.text }}
        </div>
      </div>
    </div>
    <div class="main_content">
      <div class="common_title">{{ currentQuota.quotaName }}</div>
      <div class="nav_wrap">
        <div class="tit">选择时间：</div>
        <div class="content" @click="showSelectDate">
          <div>{{ currentDate }}</div>
          <i class="down"></i>
        </div>
      </div>
      <div class="main_list">
        <pull-refresh-list ref="PullRefreshList" :limit="queryInfo.size" :page-no.sync="queryInfo.current" :data.sync="dataList" @getList="initData">
          <div class="quato_item" v-for="item in dataList" :key="item.index">
            <div class="left" v-if="item.position === 1">
              <i class="first"></i>
            </div>
            <div class="left" v-else-if="item.position === 2">
              <i class="second"></i>
            </div>
            <div class="left" v-else-if="item.position === 3">
              <i class="third"></i>
            </div>
            <div class="left" v-else-if="item.signage === 1">
              <div class="red_index">{{ item.position }}</div>
            </div>
            <div class="left" v-else>
              <div class="blue_index">{{ item.position }}</div>
            </div>
            <div class="right">
              <div class="top">
                <div class="tit" :class="item.signage === 1 ? 'danger-mark' : ''">
                  {{ item.areaName }}
                </div>
                <div class="num2">
                  <div class="up" v-if="item.prePosition !== 0 && item.position - item.prePosition < 0">
                    <i class="icon"></i>
                    {{ item.prePosition - item.position }}
                  </div>
                  <div class="down" v-if="item.prePosition !== 0 && item.position - item.prePosition > 0">
                    <i class="icon"></i>
                    {{ item.position - item.prePosition }}
                  </div>
                  <div class="no" v-if="item.prePosition === 0 || item.position - item.prePosition === 0">- -</div>
                </div>
              </div>
              <div class="info">
                <div v-for="desc in item.dimensionArr" :key="desc.index">{{ desc.name }}：{{ desc.value }}</div>
              </div>
            </div>
          </div>
        </pull-refresh-list>
      </div>
    </div>
    <van-popup v-model="dateShow" round position="bottom" get-container="#app">
      <van-datetime-picker type="year-month" :value="now" @confirm="onConfirm" @cancel="cancel" :min-date="new Date('2022/1/1')" />
    </van-popup>
  </div>
</template>

<script>
import CommonHeader from '@/components/commonHeader';
import PullRefreshList from '@/components/PullRefreshList';
import { Toast } from 'vant';
export default {
  // eslint-disable-next-line
  name: 'QuotaDetail',
  components: {
    CommonHeader,
    PullRefreshList,
  },
  data() {
    return {
      selectList: [
        {
          text: '月度(季度)',
          value: '1',
        },
        {
          text: '年度',
          value: '2',
        },
      ],
      queryInfo: {
        state: '1',
        current: 1,
        size: 20,
      },
      dateShow: false,
      now: '',
      currentDate: '',
      currentQuota: {},
      dataList: [], // 列表数据实体
    };
  },
  created() {
    this.currentDate = this.$route.query.currentDate;
    this.now = new Date(this.currentDate);
    const query = this.$route.query;
    this.currentQuota = query;
  },
  methods: {
    changeNav(data) {
      if (data.value === '2') {
        Toast.fail('该功能暂未开放！');
        return;
      }
      this.queryInfo.state = data.value;
    },
    showSelectDate() {
      this.dateShow = true;
    },
    onConfirm(params) {
      const year = params.getFullYear();
      const month = params.getMonth() + 1 > 9 ? params.getMonth() + 1 : '0' + (params.getMonth() + 1);
      this.currentDate = year + '-' + month;
      this.dateShow = false;
      this.$refs.PullRefreshList.onSearch();
    },
    cancel() {
      this.dateShow = false;
    },
    initData(callback) {
      const year = this.currentDate.split('-')[0];
      const month = this.currentDate.split('-')[1] - 0 + '';

      const params = {
        _gp: 'quota',
        _mt: 'cityKeyRanking',
        quotaId: this.currentQuota.quotaId,
        issueNo: year + '-' + month,
        page: this.queryInfo.current,
        limit: this.queryInfo.size,
      };
      this.$api.commonApi(params).then((res) => {
        if (res.errno === 200) {
          const rows = res.data.items.map((item) => {
            // 处理dimension数据
            const dimension = item.dimension.slice(1, -2);
            const arr = dimension.split(',');
            const dimensionArr = [];
            for (let i in arr) {
              let obj = {
                name: arr[i].split(':')[0].split('"')[1],
                value: arr[i].split(':')[1].split('"')[1],
              };
              dimensionArr.push(obj);
            }
            return {
              ...item,
              dimensionArr,
            };
          });
          if (callback) callback(rows);
        } else {
          callback([]);
        }
      });
    },
  },
};
</script>

<style scoped>
.main_box {
  min-height: 100vh;
  background-color: #f4f5fa;
}
.nav_box {
  width: 100%;
  background-color: #fff;
}
.nav_content {
  width: 100%;
  display: flex;
}
.nav_content .nav_item {
  width: 49%;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  color: #999;
  background-color: #fff;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
}
.nav_content .nav_item.active {
  color: #333;
}
.nav_content .nav_item.active::after {
  display: block;
  content: '';
  width: 50px;
  border-bottom: 2px solid #1b68eb;
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: -25px;
}
.main_list {
  width: 100%;
  padding: 10px 15px;
  box-sizing: border-box;
}
.main_content {
  padding: 15px;
}

.common_title {
  text-align: left;
  font-size: 16px;
  margin-bottom: 10px;
}

.nav_wrap {
  width: 100%;
  display: flex;
  margin-bottom: 15px;
}
.nav_wrap .tit {
  width: 100px;
  font-size: 14px;
  color: #999;
}
.nav_wrap .content {
  width: 100%;
  font-size: 14px;
  color: #333;
  display: flex;
  line-height: 18px;
}
.nav_wrap .content .down {
  width: 15px;
  height: 8px;
  background: url('../../assets/image/down.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  left: 10px;
  top: 5px;
}

.quato_item {
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 10px 15px;
  text-align: left;
  box-sizing: border-box;
  display: flex;
}
.quato_item .first {
  display: block;
  width: 30px;
  height: 40px;
  background: url('../../assets/image/first.png') no-repeat;
  background-size: 100% 100%;
}
.quato_item .second {
  display: block;
  width: 30px;
  height: 40px;
  background: url('../../assets/image/second.png') no-repeat;
  background-size: 100% 100%;
}
.quato_item .third {
  display: block;
  width: 30px;
  height: 40px;
  background: url('../../assets/image/third.png') no-repeat;
  background-size: 100% 100%;
}
.quato_item .blue_index {
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  border-radius: 50%;
  background-color: #ebf2fe;
  font-size: 18px;
  color: #4180f2;
}
.quato_item .red_index {
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  border-radius: 50%;
  background-color: #fee6ea;
  font-size: 18px;
  color: #f60e36;
}
.quato_item .left {
  display: flex;
  align-items: center;
}
.quato_item .right {
  padding-left: 20px;
}
.quato_item .right .top {
  display: flex;
  margin-bottom: 10px;
}
.quato_item .right .top .tit {
  font-size: 15px;
  color: #333;
  margin-right: 10px;
  max-width: 180px;
}
.quato_item .right .top .tit.danger-mark {
  color: #f60e36;
}
.quato_item .right .top .no {
  font-size: 14px;
  color: #bcc0c7;
}
.quato_item .right .top .down {
  font-size: 14px;
  color: #e43c26;
  padding-top: 3px;
}
.quato_item .right .top .down .icon {
  display: inline-block;
  width: 10px;
  height: 13px;
  background: url('../../assets/image/arrow_down.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  top: 2px;
  margin-right: 5px;
}
.quato_item .right .top .up {
  font-size: 14px;
  color: #5bc55a;
  padding-top: 3px;
}
.quato_item .right .top .up .icon {
  display: inline-block;
  width: 10px;
  height: 13px;
  background: url('../../assets/image/arrow_up.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  top: 2px;
  margin-right: 5px;
}
.quato_item .right .info {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
  font-size: 14px;
  color: #bcc0c7;
}
.quato_item .right .info > div {
  margin-right: 15px;
  margin-bottom: 10px;
}
</style>